<template>
	<div><!-- :model="ruleForm" 是绑定我们form表单中需要提交给后台的一个对象
	 :rules="rules" 是动态绑定的rules，表单验证规则
	 ref="ruleForm"  是我们绑定的对象，用于按钮的使用-->
		<el-form style="width: 60%;" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="编号" >
		    <el-input v-model="ruleForm.id" readonly></el-input><!-- readonly不能修改 -->
		  </el-form-item>
		  <el-form-item label="图书名称" prop="name">
		    <el-input v-model="ruleForm.name"></el-input>
		  </el-form-item>
		  <el-form-item label="作者" prop="author">
		    <el-input v-model="ruleForm.author"></el-input>
		  </el-form-item>
		  <el-form-item label="出版社" prop="publish">
		    <el-input v-model="ruleForm.publish"></el-input>
		  </el-form-item>
		  <el-form-item label="页数" prop="pages">
		    <el-input v-model="ruleForm.pages"></el-input>
		  </el-form-item>
		  <el-form-item label="价格" prop="price">
		    <el-input v-model="ruleForm.price"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
		    <el-button @click="resetForm('ruleForm')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          author: '',
          publish: '',
          pages: '',
          price: '',
		  id:''
        },
		id:this.$route.query.id,
		// id: this.$route.params.id,
        rules: {
          name: [
            { required: true, message: '图书名称不能为空', trigger: 'blur' },
            { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
          ],
		  author: [
		    { required: true, message: '作者不能为空', trigger: 'blur' },
		    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
		  ],
		  publish: [
		    { required: true, message: '出版社不能为空', trigger: 'blur' }
		  ],
		  pages: [
		    { required: true, message: '页数不能为空', trigger: 'blur' }
		  ],
		  price: [
		    { required: true, message: '价格不能为空', trigger: 'blur' }
		  ]
          
        }
      };
    },
	created() {
		// alert(this.id)
		axios.get('http://localhost:8888/book/findById/'+this.id).then(result=>{
			this.ruleForm= result.data
		})
	},
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.put('http://localhost:8888/book/update',this.ruleForm).then(result=>{
				if(result.data == 'success'){
					this.$alert('《'+ this.ruleForm.name + '》修改成功！', '消息', {
						confirmButtonText: '确定',
						callback: action => {
							this.$router.push('/bookAll') //跳转到查询页面
						}
					});
				}
			})
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>


<style scoped="scoped">
</style>
